<!-- <link rel="import" href="../../bower_components/toast-er/toast-er.html"> -->
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="toast-element">
  <template>
    <style>
      .yellow-button {
      text-transform: none;
      color: #eeff41;
      }
      paper-toast{
        position: absolute;
      }

    </style>

    <paper-button raised on-click="someMethod">1</paper-button>
    <paper-button raised on-click="someOtherMethod">2</paper-button>
    <!-- <template is="dom-repeat" items="[[notifications]]">
      <paper-toast id="toast1" duration="5000" text="[[item.text]]">
        [[item.text]]
        <paper-button on-click="hideToast" class="yellow-button">Close now!</paper-button>
      </paper-toast>
    </template> -->
    <template is="dom-repeat" items="[[notifications]]">

    </template>

    <!-- <toast-er></toast-er> -->

  </template>
  <script>
    Polymer({
      is: 'toast-element',

      properties: {

        notifications: {
          type: Array,
          value: [
            {
              text: 'Server down-time',
            },
            {
              text: 'Machine stopped working',
            },
            {
              text: 'Server down-time',
            },
            {
              text: 'Collectd installed successfully',
            }
          ]
        },


      },
      notificationsQueue: function(item){
        var queue = new Queue();
      },
      someMethod: function() {
         this.dispatchEvent(new CustomEvent('iron-signal', { bubbles: true, composed: true, detail: {
           name: 'toaster-bake',
           data: {
             text: 'You are not allowed to do this.',
             type: 'error',
             duration: 0,
             heat: 'high',
             shelf: 'bottom-left'
           }
         } }))
      },

      someOtherMethod: function() {
         this.dispatchEvent(new CustomEvent('iron-signal', { bubbles: true, composed: true, detail: {
           name: 'toaster-bake',
           data: {
             text: 'Yozxcvzx zdvzdfsdf .',
             type: 'error',
             duration: 5000,
             heat: 'high',
             shelf: 'bottom-left'
           }
         } }))
      }



    });
  </script>
</dom-module>
